<template>
  <el-radio-group v-model="form[post].option">
    <el-radio
      v-for="(item, index) in options"
      :key="index"
      :label="item.value"
      >{{ item.label }}</el-radio
    >
    <!-- <el-form-item
      prop="inputValue"
      class="pl0"
      :rules="[{ required: true, message: '请输入内容', trigger: 'blur' }]"
    >
      
    </el-form-item> -->
    <el-input
      v-if="isOtherOptionShow"
      v-model="inputValue"
      placeholder="请输入内容"
      @blur="change"
    ></el-input>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      inputValue: "",
      isOtherOptionShow: false,
    };
  },
  methods: {
    change() {
      let otherValue = {
        value: this.inputValue,
        isOrther: true,
        option: this.form[this.post].option,
      };
      this.form[this.post] = otherValue;
    },
  },
  watch: {
    form: {
      handler: function (val) {
        let otherOption = this.options.find((item) => item.show_input == 1);
        if (val[this.post].option == otherOption.value) {
          this.isOtherOptionShow = true;
        } else {
          this.isOtherOptionShow = false;
        }
      },
      deep: true,
    },
  },

  props: {
    options: {
      type: Array,
      default: () => [],
    },
    form: {
      type: Object,
      default: {},
    },
    post: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang='less'>
.pl0 {
  .el-form-item__content {
    padding-left: 0 !important;
  }
}
</style>